<!--  -->
<template>
  <div class="anov-system-check" ref="anovSystemCheck">
    <div class="anov-check-list" ref="anovCheckList">
      <div class="anov-modal-icon-wrapper" ref="anovModalIcon">
        <div
          class="anov-radar"
          ref="radar"
          :class="finish ? 'finish' : ''"
        >
          <div class="anov-radar-dot" :class="finish ? 'finish' : ''">
            <i class="anov-radar-dot1"></i>
            <i class="anov-radar-dot2"></i>
            <i class="anov-radar-dot3"></i>
            <i class="anov-radar-dot4"></i>
          </div>
          <div class="anov-radar-inner">
            <div class="anov-radar-inner-inner"></div>
            <div class="anov-check-score" ref="score">
              <span class="anov-score-score">{{ finialyScore }}</span
              ><span class="anov-score-unit">分</span>
            </div>
          </div>
        </div>
      </div>
      <div class="anov-system-check-wrapper" ref="anovSystemCheckWrapper">
        <ul class="anov-system-check-list">
          <li
            v-for="(item, index) in checkList"
            :key="index"
            :ref="'checklist' + index"
            :class="item.level"
          >
            <p class="anov-check-name">{{ item.name }}:</p>
            <p class="anov-check-value">{{ item.value }}</p>
            <!-- <p class="anov-check-score-num">{{ item.score }}分</p> -->
          </li>
        </ul>
      </div>
      <div class="anov-modal-btn-wrapper">
        <div class="anov-modal-btn" style="maring-top: 50px;" ref="anovModalBtn3" @click="viewResult">
          {{ $t('cmlpanel.viewResult') }}
        </div>
        <div class="anov-modal-btn" style="maring-top: 50px;" ref="anovModalBtn4" @click="systemClose">
          {{ $t('cmlpanel.stop') }}
        </div>
      </div>
    </div>
    <div class="anov-check-result-wrapper" ref="anovCheckResultWrapper">
      <div class="anov-check-result">
        <div class="anov-check-result-text" ref="resultText">
          <p class="anov-check-result-total" ref="anovCheckResultTotal">您的系统得分是<span :style="computedColor">{{scoreTotal.toFixed(0)}}</span>分</p>
          <p class="anov-check-result-tip" ref="anovCheckResultTip" v-if="computedLevel">当前系统显卡性能较好，最高可支持{{supportHighestLevel}}级大屏</p>
          <p class="anov-check-result-tip" ref="anovCheckResultTip" v-if="!computedLevel">当前大屏等级为{{level}} ，在当前系统环境下运行可能会有卡顿或展示效果不完整</p>
        </div>
        <div class="anov-radar-chart-wrapper">
          <radarChart ref="radarChart" :params="radarChartData"></radarChart>
        </div>
      </div>
      <div class="anov-modal-btn-wrapper">
        <div class="anov-modal-btn" style="maring-top: 50px;" ref="anovModalBtn" @click="viewDetails">
          {{ $t('cmlpanel.viewDetails') }}
        </div>
        <div class="anov-modal-btn" style="maring-top: 50px;" ref="anovModalBtn1" @click="systemClose">
          {{ $t('cmlpanel.stop') }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as anov from 'anov-core'
import radarChart from './system-check-radar.vue'
import { mapState } from 'vuex'
export default {
  name: 'systemCheck',
  components: { radarChart },
  data() {
    return {
      checkList: [],
      text: '',
      scoreTotal: 10,
      checkTextFinish: '系统自检完成',
      finish: false,
      checkItem: {},
      num: 0,
      lowCheckList: [],
      flag: true,
      checkParams: {},
      total: 0,
      delay: 1000,
      delayClose: 5000,
      radarChartData: [],
      resultText: '',
      finialyScore: 0,
      network: {},
      supportHighestLevel: 0,
      level: 0,
      timer: null
    }
  },
  computed: {
    ...mapState('env',['videoIsAvailable', 'audioIsAvailable']),
    computedColor(){
       let total = this.scoreTotal.toFixed(0), color = ''
       if (total < 33) {
          color = 'rgba(222, 90, 84, 1)'
        } else if (total < 66) {
          color = 'rgba(240, 163, 13, 1)'
        } else {
          color = 'rgba(36, 224, 241, 1)'
        }
        return {color: color}
    },
    computedLevel(){
      this.supportHighestLevel =
          app.loading.supportHighestLevel
      let supportHighestLevel = this.supportHighestLevel.replace(/L/, '') - 0
      this.level = anov.envServer.level.replace(/L/, '') - 0
      if (supportHighestLevel > this.level) {
        return true
        // 如果系统支持的最高的大屏等级 大于 当前大屏等级
      } else {
        return false
      }
    }
  },
  watch: {},
  methods: {
    init() {
      this.reset()
      this.checkParams = JSON.parse(
        JSON.stringify(anov.systemCheckServer.defaultParams)
      )
      this.getTotalScore()

      this.getcheckList()
      this.getResultText()

      anov.soundServer.volume({ type: 'bgm', vol: 0.2 })
      anov.soundServer.volume({ type: 'words', vol: 0.2 })

      this.$nextTick(() => {
        this.tl = new TimelineMax({
          autoRemoveChildren: true,
          onStart: function () {},
          onComplete: () => {}
        })
        let tw1 = TweenMax.to(this.$refs.anovSystemCheck, 0.3, { opacity: 1 })
        let tw4 = TweenMax.to(this.$refs.anovModalIcon, 0.3, {
          scale: 1,
          opacity: 1,
          ease: Power0.easeInOut
        })
        let tw8 = TweenMax.to(this.$refs.anovSystemCheckWrapper, 0.1, {
          opacity: 1
        })

        let anovModalBtn3 = TweenMax.fromTo(this.$refs.anovModalBtn3, 0.1, {
          opacity: 0
        }, {opacity: 1})
        let anovModalBtn4 = TweenMax.fromTo(this.$refs.anovModalBtn4, 0.1, {
          opacity: 0
        }, {opacity: 1})

        let anovCheckList = TweenMax.to(this.$refs.anovCheckList, .1, {opacity: 1, zIndex: 10})
        let anovCheckResultWrapper = TweenMax.to(this.$refs.anovCheckResultWrapper, .1, {opacity: 0, zIndex: 5})
        this.tl.addLabel('start')
        this.tl
          .add(tw1, 'start+=0')
          .add(anovCheckList, 'start+=0')
          .add(anovCheckResultWrapper, 'start+=0')
          .add(tw4, 'start+=0.1')
          .add(tw8, 'start+=.2')
          .add(anovModalBtn3, 'start+=2')
          .add(anovModalBtn4, 'start+=2')
        for (let i = 0; i < this.checkList.length; i++) {
          this.tl.add(
            TweenMax.to(this.$refs['checklist' + i], 0.2, {
              opacity: 1,
              y: 0,
              ease: Power0.easeInOut
            }),
            'start+=' + (i * 0.1 + 0.4)
          )
        }

        this.timer = setTimeout(()=>{
          this.showResult()
        }, 5000)
      })
      this.radarChartData.push({
        name: 'GPULevel',
        value: anov.envServer.hardware.GPULevel,
        max: 3
      })
    },
    showResult(){
      let tl = new TimelineMax({})
      let anovCheckListHide = TweenMax.to(this.$refs.anovCheckList, .2, {opacity: 0, zIndex: 5})
      let anovCheckResultWrapperShow = TweenMax.to(this.$refs.anovCheckResultWrapper, .2, {opacity: 1, zIndex: 10})
       let resultText = TweenMax.to(this.$refs.resultText, .1, {
          opacity: 1,
        })
      let anovModalBtn = TweenMax.fromTo(this.$refs.anovModalBtn, 0.3, {
          opacity: 0
        }, {opacity: 1})
      let anovModalBtn1 = TweenMax.fromTo(this.$refs.anovModalBtn1, 0.3, {
          opacity: 0
      }, {opacity: 1})
      let anovCheckResultTotal = TweenMax.to(this.$refs.anovCheckResultTotal, .3, {
          opacity: 1
        })
      let anovCheckResultTip = TweenMax.to(this.$refs.anovCheckResultTip, .3, {
        opacity: 1
        })
      tl.addLabel('start')
        .add(anovCheckListHide, 'start+=0')
        .add(anovCheckResultWrapperShow, 'start+=0')
        .add(this.$refs.radarChart.init(), 'start+=0.5')
        .add(resultText, 'start+=.2')
        .add(anovCheckResultTotal, 'start+=.2')
        .add(anovCheckResultTip, 'start+=.3')
        .add(anovModalBtn, 'start+=.6')
        .add(anovModalBtn1, 'start+=.6')

      return tl
    },
    getTotalScore() {
      let checkParamsKey = [],
        openParamsKey = [],
        checkParams = this.checkParams,
        openParams = anov.envServer.openParams
      let total = 0,
        index = 0

      checkParamsKey = Object.keys(checkParams)
      openParamsKey = Object.keys(openParams)

      for (let i = 0; i < checkParamsKey.length; i++) {
        for (let j = 0; j < openParamsKey.length; j++) {
          let iValue = checkParamsKey[i],
            jValue = openParamsKey[j]
          if (checkParams[iValue].key == jValue && checkParams[iValue].ratio) {
            checkParams[iValue].isCheck = openParams[jValue]
            if (openParams[jValue]) {
              index++
              total += checkParams[iValue].ratio * 100
            }
          }
        }
      }
      this.total = total / 100
    },

    reset() {
      this.checkList = []
      this.radarChartData = []
      this.lowCheckList = []
      this.scoreTotal = 0
      this.finialyScore = 0
      this.finish = false
      this.text = ''
      this.num = 0
      this.resultText = ''

      this.$refs.anovSystemCheck && TweenMax.set(this.$refs.anovSystemCheck, { opacity: 0 })
      this.$refs.anovModalIcon && TweenMax.set(this.$refs.anovModalIcon, {
        scale: 0,
        opacity: 0
      })
      this.$refs.anovModalBtn && TweenMax.set(this.$refs.anovModalBtn, { opacity: 0 })
      this.$refs.resultText && TweenMax.set(this.$refs.resultText, { opacity: 0 })
      this.$refs.radarChart && this.$refs.radarChart.destory()
      // TweenMax.set('.anov-system-check-list', { height: 0 })
    },
    destroy(params) {
      this.flag = false
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.reset()
      anov.soundServer.volume({ type: 'bgm', vol: 1 })
      anov.soundServer.volume({ type: 'words', vol: 1 })
      anov.systemCheckServer.isSystemCheckOpen = false
      if (typeof params.onClose == 'function') {
        params.onClose()
      }
    },
    systemClose() {
      app.modal.destroy({ componentsName: 'systemCheck' })
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.$refs.radarChart.destory()
    },
    getcheckList() {
      this.checkList = []
      let checkParams = this.checkParams,
        checkParamsKey = Object.keys(checkParams)
      for (let i = 0; i < checkParamsKey.length; i++) {
        let key = checkParamsKey[i],
          obj = {}
        if (key == 'display') {
          obj = this.checkDisplay(checkParams[key])
        }
        if (key == 'performance') {
          obj = this.checkPerformance(checkParams[key])
        }
        if (key == 'audio') {
          obj = this.checkAudio(checkParams[key])
        }
        if (key == 'video') {
          obj = this.checkVideo(checkParams[key])
        }
        if (key == 'innerLine') {
          obj = this.checkInnerLine(checkParams[key])
        }
        if (key == 'innerLineSpeed') {
          obj = this.checkInnerSpeed(checkParams[key])
        }
        if (key == 'GPUlevel') {
          obj = this.checkGPULevel(checkParams[key])
        }
        if (key == 'GPU') {
          obj = this.checkGpu(checkParams[key])
        }
        if (key == 'level') {
          obj = this.checkLevel(checkParams[key])
        }
        if (key == 'browser') {
          obj = this.checkBrowser(checkParams[key])
        }
        if (key == 'domNum') {
          obj = { ...checkParams[key] }
          obj.value = anov.envServer.dom.total || 0
        }
        if (key == 'canvasNum') {
          obj = { ...checkParams[key] }
          obj.value = anov.envServer.dom.canvas || 0
        }
        if (key == 'svgNum') {
          obj = { ...checkParams[key] }
          obj.value = anov.envServer.dom.svg || 0
        }
        if (key == 'videoNum') {
          obj = { ...checkParams[key] }
          obj.value = anov.envServer.dom.video || 0
        }
        this.checkList.push(obj)
      }
    },
    checkDisplay(obj) {
      //显示效果根据当前窗口，而不是scaleRatio
      let dw = document.body.clientWidth
      let dh = document.body.clientHeight
      let minRatio = Math.min(
        dw / anov.envServer.designSize.w,
        dh / anov.envServer.designSize.h
      )
      if (minRatio >= 1) {
        minRatio = 1
      }
      obj.value =
        (minRatio >= 1 ? 100 : parseFloat(minRatio * 100).toFixed(1)) + '%'
      obj.score = (
        (parseFloat(minRatio * obj.ratio) * 100) /
        this.total
      ).toFixed(0)
      obj.level = this.getLevel(obj.score, obj.ratio)
      this.radarChartData.push({
        name: obj.name,
        value: minRatio >= 1 ? 100 : parseFloat(minRatio * 100).toFixed(1) - 0,
        max: 100
      })
      this.setTotalScore(obj.score)
      return obj
    },
    checkPerformance(obj) {
      obj.value = anov.envServer.fps + 'fps'
      let maxfps = anov.envServer.fpsRange[1]
      // if (anov.envServer.fps > 24) {
      //   obj.score = (parseFloat(obj.ratio) * 100) / this.total
      // } else {
      //   obj.score =
      //     (parseFloat((anov.envServer.fps / 24) * obj.ratio) * 100) / this.total
      // }
      obj.score = (parseFloat((anov.envServer.fps / maxfps) * obj.ratio) * 100) / this.total
      obj.level = this.getLevel(obj.score, obj.ratio)
      this.radarChartData.push({ name: obj.name, value: anov.envServer.fps, max: maxfps })
      this.setTotalScore(obj.score)
      return obj
    },
    checkVideo(obj) {
      //设置摄像头
      obj.value = this.videoIsAvailable ? (anov.envServer.videoStatus ? '已开启' : '未开启') : "不可用"
      obj.score = anov.envServer.videoStatus
        ? Math.floor((obj.ratio * 100) / this.total)
        : 0
      obj.level = this.getLevel(obj.score, obj.ratio)
      this.setTotalScore(obj.score)
      return obj
    },
    checkAudio(obj) {
      obj.value = this.audioIsAvailable ? (anov.envServer.audioStatus ? '已开启' : '未开启') : "不可用"
      obj.score = anov.envServer.audioStatus
        ? Math.floor((obj.ratio * 100) / this.total)
        : 0
      obj.level = this.getLevel(obj.score, obj.ratio)
      this.setTotalScore(obj.score)
      return obj
    },
    checkInnerLine(obj) {
      obj.value = anov.envServer.localNetwork.connected ? '已连接' : '未连接'
      obj.score = anov.envServer.localNetwork.connected
        ? Math.floor((obj.ratio * 100) / this.total)
        : 0
      obj.level = this.getLevel(obj.score, obj.ratio)
      this.setTotalScore(obj.score)
      return obj
    },
    checkInnerSpeed(obj) {
      //设置内网网速
      app.envServer.setNetWorkOption('systemCheck')
      if (anov.envServer.localNetwork.connected) {
        let level = 0,
          info = this.network
        if (info.speed) {
          obj.value = info.speed + info.unit
        } else {
          obj.value =
            anov.envServer.localNetwork.speed + anov.envServer.localNetwork.unit
        }

        let speed = 0
        if (info.unit == 'MB/S') {
          speed = info.speed * 1024
        }
        if (info.unit == 'KB/S') {
          speed = info.speed
        }
        if (info.unit == 'B/S') {
          speed = (info.speed / 1024).toFixed(0)
        }
        level = anov.envServer.localNetwork.level
        obj.score = Math.floor(((level / 5) * obj.ratio * 100) / this.total)
        obj.level = this.getLevel(obj.score, obj.ratio)
        this.radarChartData.push({ name: '内网等级', value: level, max: 5 })
      } else {
        obj.value = 0
        obj.score = 0
        obj.level = this.getLevel(obj.score, obj.ratio)
        this.radarChartData.push({ name: '内网等级', value: 0, max: 5 })
      }
      this.setTotalScore(obj.score)
      return obj
    },
    checkGPULevel(obj) {
      obj.value = anov.envServer.hardware.GPULevel
      obj.score = Math.floor(((obj.value / 5) * obj.ratio * 100) / this.total)
      obj.level = this.getLevel(obj.score, obj.ratio)
      this.setTotalScore(obj.score)
      return obj
    },
    checkGpu(obj) {
      obj.value = app.envServer.hardware.GPUInfo?.name
      return obj
    },
    checkLevel(obj) {
      obj.value = app.envServer.level
      this.radarChartData.push({
        name: obj.name,
        value: obj.value.replace(/L/, '') - 0,
        max: 5
      })
      return obj
    },
    checkBrowser(obj) {
      obj.value =
        app.envServer.browserInfo.browser + app.envServer.browserInfo.version
      return obj
    },

    setTotalScore(score) {
      this.scoreTotal += parseFloat(score)
      let totalScore = this.scoreTotal
      if (totalScore < 33) {
        TweenMax.to(this.$refs['radar'], 1, {
          '--dot1Color': 'rgba(222, 90, 84, .8)',
          '--dot2Color': 'rgba(222, 90, 84, .6)',
          '--dot3Color': 'rgba(222, 90, 84, .3)',
          '--dot4Color': 'rgba(222, 90, 84, .8)',
          '--circleOColor': 'rgba(222, 90, 84, .5)',
          '--circleIColor': 'rgba(222, 90, 84, .8)',
          '--areaColor': 'rgba(222, 90, 84, 1)',
          '--textColor': 'rgba(222, 90, 84, 1)',
          '--lineColor': 'rgba(222, 90, 84, .3)'
        })
      } else if (totalScore < 66) {
        TweenMax.to(this.$refs['radar'], 1, {
          '--dot1Color': 'rgba(240, 163, 13, .8)',
          '--dot2Color': 'rgba(240, 163, 13, .6)',
          '--dot3Color': 'rgba(240, 163, 13, .3)',
          '--dot4Color': 'rgba(240, 163, 13, .8)',
          '--circleOColor': 'rgba(240, 163, 13, .5)',
          '--circleIColor': 'rgba(240, 163, 13, .8)',
          '--areaColor': 'rgba(240, 163, 13, 1)',
          '--textColor': 'rgba(240, 163, 13, 1)',
          '--lineColor': 'rgba(240, 163, 13, .3)'
        })
      } else {
        TweenMax.to(this.$refs['radar'], 1, {
          '--dot1Color': 'rgba(36, 224, 241, .8)',
          '--dot2Color': 'rgba(36, 224, 241, .6)',
          '--dot3Color': 'rgba(36, 224, 241, .3)',
          '--dot4Color': 'rgba(36, 224, 241, .8)',
          '--circleOColor': 'rgba(36, 224, 241, .5)',
          '--circleIColor': 'rgba(36, 224, 241, .8)',
          '--areaColor': 'rgba(36, 224, 241, 1)',
          '--textColor': 'rgba(36, 224, 241, 1)',
          '--lineColor': 'rgba(36, 224, 241, .3)'
        })
      }
    },
    getLevel(score, ratio) {
      let low = parseFloat(ratio / 3),
        high = parseFloat((ratio / 3) * 2)
      let level = ''
      if (score < low) {
        level = 'low'
      } else if (score < high) {
        level = 'middle'
      } else {
        level = 'high'
      }
      return 'high'
    },
    viewDetails(){
      TweenMax.set(this.$refs.anovCheckResultWrapper,  {opacity: 0, zIndex: 5})
      TweenMax.set(this.$refs.anovCheckList,  {opacity: 1, zIndex: 10})
      this.$refs.radarChart.destory()
    },
    viewResult(){
      if(this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.showResult()
      // TweenMax.set(this.$refs.anovCheckResultWrapper,  {opacity: 1, zIndex: 10})
      // TweenMax.set(this.$refs.anovCheckList,  {opacity: 0, zIndex: 5})
    },
    getResultText() {
      let soundsId1 = null,
        total = this.scoreTotal.toFixed(0)
      TweenMax.to(this, 3, {
        finialyScore: total,
        roundProps: ['finialyScore'],
        onStart: () => {
          soundsId1 = anov.soundServer.play({ type: 'number', duration: -1 })
        },
        onComplete: () => {
          anov.soundServer.stop({ type: 'number', id: soundsId1 })
          this.finish = true
        }
      })
      let str = '',
        color = ''
      if (total < 33) {
        color = 'rgba(222, 90, 84, 1)'
      } else if (total < 66) {
        color = 'rgba(240, 163, 13, 1)'
      } else {
        color = 'rgba(36, 224, 241, 1)'
      }
    }
  },
  created() {},
  mounted() {
    app.envServer.addEventListener('systemCheckNetworkSpeed', (result) => {
      this.network = result.result
      this.checkList.map((item) => {
        if (item.name == '内网网速') {
          item.value = this.network.speed + this.network.unit
        }
      })
    })
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
// @import '../../../css/_lib-variable.scss';
.anov-system-check {
  opacity: 0;
  --dot1Color: 'rgba(36, 224, 241, .8)';
  --dot2Color: 'rgba(36, 224, 241, .6)';
  --dot3Color: 'rgba(36, 224, 241, .3)';
  --dot4Color: 'rgba(36, 224, 241, .8)';
  --circleOColor: 'rgba(36, 224, 241, .5)';
  --circleIColor: 'rgba(36, 224, 241, .8)';
  --areaColor: 'rgba(36, 224, 241, 1)';
  --textColor: 'rgba(36, 224, 241, 1)';
  --lineColor: 'rgba(36, 224, 241, .3)';
  .anov-check-score {
    color: var(--textColor);
  }
  .anov-check-result-score {
    color: var(--textColor);
  }
  .anov-radar {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--circleOColor);
    overflow: hidden;
  }
  .anov-radar:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(
      40deg,
      rgba(0, 255, 51, 0) 30%,
      var(--areaColor) 100%
    );
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: radar-beam 5s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
  }
  .anov-radar.finish::after {
    display: none;
  }
  .anov-radar-dot1 {
    position: absolute;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--dot1Color);
    border-radius: 50%;
  }
  .anov-radar-dot2 {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 5px;
    height: 5px;
    background: var(--dot2Color);
    border-radius: 50%;
  }
  .anov-radar-dot3 {
    position: absolute;
    top: 25px;
    left: 30px;
    width: 3px;
    height: 3px;
    background: var(--dot3Color);
    border-radius: 50%;
  }
  .anov-radar-dot4 {
    position: absolute;
    top: 25px;
    left: 70px;
    width: 6px;
    height: 6px;
    background: var(--dot4Color);
    border-radius: 50%;
  }
  .anov-radar-inner {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 19px 0 0 19px;
    border: 2px solid var(--circleIColor);
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(0, 0, 0, 0) 0,
      rgba(16, 16, 21, 1) 80%
    );
  }
  .anov-radar-inner-inner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: linear-gradient(
        0deg,
        transparent 15%,
        var(--lineColor) 16%,
        var(--lineColor) 17%,
        transparent 18%,
        transparent 30%,
        var(--lineColor) 31%,
        var(--lineColor) 32%,
        transparent 33%,
        transparent 45%,
        var(--lineColor) 46%,
        var(--lineColor) 47%,
        transparent 48%,
        transparent 60%,
        var(--lineColor) 61%,
        var(--lineColor) 62%,
        transparent 63%,
        transparent 75%,
        var(--lineColor) 76%,
        var(--lineColor) 77%,
        transparent 78%
      ),
      linear-gradient(
        90deg,
        transparent 15%,
        var(--lineColor) 16%,
        var(--lineColor) 17%,
        transparent 18%,
        transparent 30%,
        var(--lineColor) 31%,
        var(--lineColor) 32%,
        transparent 33%,
        transparent 45%,
        var(--lineColor) 46%,
        var(--lineColor) 47%,
        transparent 48%,
        transparent 60%,
        var(--lineColor) 61%,
        var(--lineColor) 62%,
        transparent 63%,
        transparent 75%,
        var(--lineColor) 76%,
        var(--lineColor) 77%,
        transparent 78%
      );
  }
}
#checkText {
  margin-bottom: 20px;
}
#checkTextFinish {
  margin-bottom: 20px;
}
.anov-radar-dot {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 50%;
  animation: radar-dot 5s 0.7s infinite;
  animation-timing-function: linear;
}
.anov-radar-dot.finish {
  display: none;
}
.anov-system-check .anov-radar-finish:after {
  display: none;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.anov-system-check .anov-radar-finish .anov-radar-dot {
  display: none;
  opacity: 0;
}
.anov-check-score {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 90px;
}
.anov-check-score .anov-score-score {
  display: inline-block;
  font-size: 28px;
  font-weight: normal;
  transform: scale(1, 1.2);
}
.anov-check-score .anov-score-unit {
  display: inline-block;
  margin-left: 2px;
  font-size: 18px;
}
.anov-system-check-wrapper {
  margin-top: 50px;
  text-align: center;
}
.anov-system-check-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 100px;
  transition: all 0.3s ease-in;
  li {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
    opacity: 0;
    .anov-check-name {
      width: 120px;
      margin-right: 20px;
      text-align: right;
    }
    .anov-check-value {
      width: 120px;
      text-align: left;
    }
  }
  li.low {
    .anov-check-value,
    .anov-check-score-num {
      color: rgba(222, 90, 84, 1);
    }
  }
  li.middle {
    .anov-check-value,
    .anov-check-score-num {
      color: rgba(240, 163, 13, 1);
    }
  }
}
@keyframes radar-beam {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes radar-dot {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}
.anov-check-list {
  position: relative;
  top: 0;
}
.anov-check-result-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px 0;
  opacity: 0;
  .anov-check-result {
    width: 100%;
    // height: 320px;
  }
  .anov-radar-chart-wrapper {
    width: 420px;
    height: 300px;
    margin: 40px auto;
  }
  .anov-check-result-text {
    font-size: 14px;
    opacity: 0;
    text-align: center;
    .anov-check-result-total {
      font-size: 24px;
      font-weight: bold;
      opacity: 0;
    }
    .anov-check-result-tip {
      color: rgba(36, 224, 241, 0.6);
      opacity: 0;
      line-height: 40px;
    }
  }
}
.anov-modal-btn-wrapper {
    position: relative;
    height: 50px;
    margin-top: 20px;
    .anov-modal-btn {
      position: absolute;
      top: 0;
      opacity: 0;
      margin: 0 ;
      transition: background-color 0.3s ease-in-out;
      &:nth-child(1) {
        left: 30%;
      }
      &:nth-child(2) {
        right: 30%;
      }
    }
  }
</style>
